<template>
  <Drawer :closable="false" :width="900" v-model="value">
    <div>
      <Row>
        <Col span="22">
          <b class="ivu-mr-8">{{ toolInfo.name }}</b>

          <Tag
            type="border"
            v-for="item in toolInfo.category_arr"
            :key="item"
            >{{ item }}</Tag
          >
        </Col>
        <Col span="2">
          <Button
            type="primary"
            v-hasC="{
              name: 'v1-buss-tool-update',
              flag: 'v1/buss/tool/update',
            }"
            @click="haddleEdit"
            >编辑</Button
          >
        </Col>
      </Row>
    </div>
    <div class="demo-drawer-profile">
      <Row>
        <Col span="15">
          <Tabs v-model="tabName" @on-click="changeTab" :animated="false">
            <TabPane label="全部" name="name1">
              <waterfall
                :imgList="imgList"
                :viewHeight="viewHeight"
                v-if="tabName == 'name1'"
                :currentId="currentId"
                :isSetWater="isSetWater"
                @refresh="refresh"
              />
            </TabPane>
            <TabPane :label="`图片（${toolInfo.image_num}）`" name="name2">
              <waterfall
                :imgList="imgList"
                :viewHeight="viewHeight"
                v-if="tabName == 'name2'"
                :isSetWater="isSetWater"
                :currentId="currentId"
                @refresh="refresh"
              />
            </TabPane>
            <TabPane :label="`视频（${toolInfo.video_num}）`" name="name3">
              <waterfall
                :imgList="imgList"
                :viewHeight="viewHeight"
                v-if="tabName == 'name3'"
                :currentId="currentId"
                @refresh="refresh"
              />
            </TabPane>
          </Tabs>
        </Col>
        <Col span="1" class="ivu-text-center">
          <Divider type="vertical" style="height: 100%" />
        </Col>
        <Col span="8" class="info">
          <p>
            项目 <span>{{ toolInfo.project_name }}</span>
          </p>
          <p>
            标签 <span>{{ toolInfo.tag_arr.join("、") }}</span>
          </p>
          <p>
            简介 <span>{{ toolInfo.desc }}</span>
          </p>
          <p>
            附件
            <a href="javascript:;" @click="downLoad">{{
              toolInfo.file_name
            }}</a>
          </p>
        </Col>
      </Row>
    </div>
    <add ref="add" :edit="false" @refresh="refresh" />
    <Spin size="large" fix v-if="spinShow"></Spin>
  </Drawer>
</template>
<script>
import add from "./add.vue";
import { toolInfo, toolDownLoad } from "@api/toolnavigation.js";
import waterfall from "@/components/waterFall";
import Base64 from "@/libs/base64";
import util from "@/libs/util";
export default {
  components: { add, waterfall },
  data() {
    return {
      viewHeight: 200,
      spinShow: false,
      value: false,
      tabName: "name1",
      currentId: "",
      toolInfo: {
        name: "",
        category_arr: [],
        image_num: 0,
        video_num: 0,
        project_name: "",
        tag_arr: [],
        desc: "",
        file_name: "",
      },
      pStyle: {
        fontSize: "16px",
        color: "rgba(0,0,0,0.85)",
        lineHeight: "24px",
        display: "block",
        marginBottom: "16px",
      },
      imgList: [],
      isSetWater: 0,
    };
  },
  methods: {
    refresh() {
      this.init(this.currentId);
      this.$emit("refresh");
    },
    downLoad() {
      let params = {
        id: this.currentId,
        download_type: "attachment",
      };
      let playload = Base64.b64EncodeUnicode(JSON.stringify(params));
      toolDownLoad({ playload: playload }).then((res) => {
        window.open(
          `${res.download_url}?auth_access_token=${util.cookies.get("token")}`
        );
        setTimeout(() => {
          this.refresh();
        }, 500);
      });
    },
    init(id) {
      this.currentId = id;
      this.imgList = [];
      this.value = true;
      this.tabName = "name1";
      this.toolInfo = {
        name: "",
        category_arr: [],
        image_num: 0,
        video_num: 0,
        project_name: "",
        tag_arr: [],
        desc: "",
        file_name: "",
      };
      this.spinShow = true;
      toolInfo({ id: id })
        .then((res) => {
          this.toolInfo = res;
          this.imgList = res.file_arr;
          this.spinShow = false;
          this.isSetWater = res.is_set_water;
        })
        .catch(() => {
          this.spinShow = false;
        });
    },
    changeTab(e) {
      this.imgList = [];
      switch (e) {
        case "name1":
          this.$nextTick(() => {
            this.imgList = this.toolInfo.file_arr;
          });
          break;
        case "name2":
          this.$nextTick(() => {
            this.imgList = this.toolInfo.file_arr.filter((item) => {
              return item.type == 1;
            });
          });
          break;
        case "name3":
          this.$nextTick(() => {
            this.imgList = this.toolInfo.file_arr.filter((item) => {
              return item.type == 2;
            });
          });
          break;
      }
    },
    haddleEdit() {
      this.$refs.add.init(this.currentId);
    },
  },
};
</script>
<style lang="less" scoped>
.demo-drawer-profile {
  font-size: 14px;
  margin-top: 24px;
}
.info p {
  margin: 0 0 20px 0;
}
.info p span,
.info p a {
  margin-left: 15px;
}
</style>
